<template>
    <nut-tabbar v-model="activeTab" bottom safe-area-inset-bottom placeholder @tab-switch="tabSwitch">
        <nut-tabbar-item v-for="(item) in tabBarInfo.list" :key="item.pagePath" :name="item.pagePath" :tab-title="item.text"
            :icon="item.icon">
        </nut-tabbar-item>
    </nut-tabbar>
</template>

<script setup lang="ts">
import { computed, h } from 'vue'
import { Home, Category, My } from '@nutui/icons-vue-taro'
import { switchTab } from '@tarojs/taro';
import { useAppStore } from '@/stores/modules/app';

const appStore = useAppStore();
const activeTab = computed(() => appStore.getActiveTab);
const tabBarInfo = {
    custom: true,
    color: '#000000',
    selectedColor: '#FF0000',
    list: [
        {
            pagePath: '/pages/index/index',
            text: '课程',
            icon: h(Home)
        },
        {
            pagePath: '/pages/child/index',
            text: '儿童',
            icon: h(My)
        },
        {
            pagePath: '/pages/mine/index',
            text: '我的',
            icon: h(Category)
        }
    ]
};

const tabSwitch = (item: Record<string, unknown>, index: number) => {
    console.log(item)
    const info = tabBarInfo.list.filter(info => info.text == item["tabTitle"])[0]
    console.log(info.pagePath)
    appStore.setActiveTab(info.pagePath);
    switchTab({"url": info.pagePath})
}
</script>
